import React, { useState } from "react";
import { Table, Button } from "antd";
import { useTranslation } from "react-i18next";
import WaitingIcon from "../../../../assets/images/dapp/waitingIcon.svg";
export const RegulationControl = React.forwardRef(({}, ref) => {
  const { t } = useTranslation();
  const [deviceType, setDeviceType] = useState(
    sessionStorage.getItem("deviceType")
  );
  const columns1 = [
    {
      title: t("dappIndexRegulation.number"),
      dataIndex: "a",
      key: "a",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.token"),
      dataIndex: "b",
      key: "b",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.currentPrice"),
      dataIndex: "c",
      key: "c",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.realTimePosition"),
      dataIndex: "d",
      key: "d",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.salesRate"),
      dataIndex: "e",
      key: "e",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.salesPrice"),
      dataIndex: "f",
      key: "f",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.shouleSalesPrice"),
      dataIndex: "g",
      key: "g",
      align: "center",
      render: (text, record) => <div className="down-text">{text}</div>,
    },
    {
      title: t("dappIndexRegulation.realitySalesPrice"),
      dataIndex: "h",
      key: "h",
      align: "center",
      render: (text, record) => <div className="down-text">{text}</div>,
    },
    {
      title: t("dappIndexRegulation.realitySlippage"),
      dataIndex: "i",
      key: "i",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.salesExecutionStatus"),
      dataIndex: "j",
      key: "j",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.weightChangeStatus"),
      dataIndex: "k",
      key: "k",
      align: "center",
    },
  ];
  const dataSource1 = [
    {
      a: "1",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "2",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "3",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "3",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "3",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
  ];

  const columns2 = [
    {
      title: t("dappIndexRegulation.number"),
      dataIndex: "a",
      key: "a",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.token"),
      dataIndex: "b",
      key: "b",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.currentPrice"),
      dataIndex: "c",
      key: "c",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.realTimePosition"),
      dataIndex: "d",
      key: "d",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.buyRate"),
      dataIndex: "e",
      key: "e",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.buyPrice"),
      dataIndex: "f",
      key: "f",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.shouleBuyNum"),
      dataIndex: "g",
      key: "g",
      align: "center",
      render: (text, record) => <div className="up-text">{text}</div>,
    },
    {
      title: t("dappIndexRegulation.realityBuyNum"),
      dataIndex: "h",
      key: "h",
      align: "center",
      render: (text, record) => <div className="up-text">{text}</div>,
    },
    {
      title: t("dappIndexRegulation.realitySlippage"),
      dataIndex: "i",
      key: "i",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.buyExecutionStatus"),
      dataIndex: "j",
      key: "j",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.weightChangeStatus"),
      dataIndex: "k",
      key: "k",
      align: "center",
    },
  ];
  const dataSource2 = [
    {
      a: "1",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "2",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "2",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "2",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "2",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
  ];

  return (
    <div className="regulation-control-comp">
      <div className="title-row">
        <div className="left-text">{t("dappIndexRegulation.taskTitle")}</div>
        <div className="right-text">
          <div className="label">
            {t("dappIndexRegulation.controlStatus")}：
          </div>
          <div className="value">
            <img src={WaitingIcon}></img>
            <span className="value-text">
              {t("dappIndexRegulation.waitingControl")}
            </span>
          </div>
        </div>
      </div>
      <div className="scroll-box">
        <div className="table-box top-box">
          <div className="btn-row">
            <div className="left-btn">
              <Button className="top-btn">
                {t("dappIndexRegulation.salesBtn")}
              </Button>
            </div>

            <div className="fee-box">
              <div className="label">{t("dappIndexRegulation.minerFees")}:</div>
              <div className="value">0.00012479BNB</div>
            </div>
          </div>
          <Table
            pagination={false}
            size="small"
            borderd="false"
            columns={columns1}
            dataSource={dataSource1}
            scroll={deviceType == "Mobile" ? { x: "max-content" } : null}
          ></Table>
        </div>
        <div className="block-footer">
          <div className="sliding-point-row">
            <div className="label">
              {t("dappIndexRegulation.salesslidingPointLabel")}
            </div>
            <div className="value">--</div>
          </div>
          <div className="tips">{t("dappIndexRegulation.salesTips")}</div>
        </div>
        <div className="table-box bottom-box">
          <div className="btn-row">
            <div className="left-btn">
              <Button className="bottom-btn">
                {t("dappIndexRegulation.buyBtn")}
              </Button>
            </div>

            <div className="fee-box">
              <div className="label">{t("dappIndexRegulation.minerFees")}:</div>
              <div className="value">0.00012479BNB</div>
            </div>
          </div>
          <Table
            pagination={false}
            size="small"
            borderd="false"
            columns={columns2}
            dataSource={dataSource2}
            scroll={deviceType == "Mobile" ? { x: "max-content" } : null}
          ></Table>
        </div>
        <div className="block-footer">
          <div className="sliding-point-row">
            <div className="label">
              {t("dappIndexRegulation.buySlidingPointLabel")}
            </div>
            <div className="value">--</div>
          </div>
          <div className="tips">{t("dappIndexRegulation.buyTips")}</div>
        </div>
        </div>

        <div className="footer-row">
          <div className="left">
            <div className="label">
              {t("dappIndexRegulation.controlSlidingPointLabel")}
            </div>
            <div className="value"></div>
          </div>
          <div className="right">
            {t("dappIndexRegulation.controlSlidingPointTips")}
          </div>
        </div>
    </div>
  );
});
